<!-- 地图信息 -->

<template>
  <div>
    <FormRadio label="地图类型" bind="mapType" :dict="DICT.MAP_TYPE" v-bind="rootProps" required />

    <FormPhoto
      label="地图图片"
      bind="fileUrl"
      folder="map"
      isPublic
      text="上传地图"
      v-bind="rootProps"
      square
      required
      @uploaded="changePhoto"
    />

    <FormInput label="地图名称" bind="mapName" v-bind="rootProps" required />

    <FormSlot label="比例尺" bind="mapRate" v-bind="rootProps" required>
      <FormNum bind="rateBefore" :min="1" v-bind="rootProps" quar @change="changeRate" />
      <b>:</b>
      <FormNum bind="rateAfter" :min="1" v-bind="rootProps" quar @change="changeRate" />
      <span>像素 / 米</span>
    </FormSlot>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyMap',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb('bind'), CORE.mixInfo('bind')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 是否为继承
     */
    isInherit() {
      return this.one.mapParent === 1
    },

    /**
     * 根地图属性
     */
    rootProps() {
      return this.isInherit ? { one: this.info, disabled: true } : {}
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换比例尺
     */
    changeRate() {
      const { rateBefore, rateAfter } = this.one
      this.one.mapRate = rateBefore && rateAfter ? `${rateBefore}:${rateAfter}` : ''
    },

    /**
     * 切换图片
     */
    changePhoto(fileName) {
      this.one.fileName = fileName
      this.one.mapName = fileName.replace(/\.\w+$/, '')
    },
  },
}
</script>
